<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.2.js"></script>
<script src="layui/layui.js"></script>
 <link rel="stylesheet" href="layui/css/layui.css"/>
</head>
<body>
<table id="lxwm" lay-filter="test"></table>	
	<!-- 行内工具栏 -->
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

<script>
		layui.use([ 'table', 'layer', 'form' ], function() {
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;						
			table.render({//读取
				elem : '#lxwm',
				height : 600,
				url : '/wzsck/lxwmQueryServlet', //数据接口
				page : true, //开启分页
				toolbar : '#tianjia', //开启头部工具栏，并为其绑定左侧模板
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				cols : [ [ //表头
				{field : 'id',title : 'ID',sort : true,fixed : 'left'}, 
				{field : 'name',title : '姓名'}, 
				{field : 'phonenumber',title : '电话号码'}, 
				{field : 'leaveamessage',title : '留言',sort : true}, 
				{field : 'mailbox',title : '邮箱',sort : true}, 
				{fixed : 'right',align : 'center',toolbar : '#barDemo'} //这里的toolbar值是模板元素的选择器
				] ]
			});
	
			
			//监听工具条
			table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象			 
			  if(layEvent === 'del'){ //删除				
			    layer.confirm('真的删除行么', function(index){
			      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			      layer.close(index);
			      //向服务端发送删除指令
			      $.ajax({
						url : "/wzsck/lxwmDelServlet",//地址
						type : "get",//请求方式
						data : {//参数
							id : data.id
						},success : function(res) {//成功以后的回调函数
							if (res == 1) {alert("删除成功！");window.location.reload();} else {alert("删除失败！");}
						}
					});
			    });
			  } 
			});					
			})
			

 
</script>
</body>
</html>